<template>
  <div>
    <div class="flyray-top flyray-top-left">
      <div class="task_search">
        <topSearch @addTaskClick="addTaskClick" />
      </div>
    </div>
    <div class="mainMsgPadding_Pro box main">
      <!-- <draggable v-model="taskList" class="draggable">
        
      </draggable>-->
      <div class="draggable">
        <el-row :gutter="24">
          <div class="draggable_list" v-for="(item,index) in taskList" :key="index">
            <el-col :xs="6" :sm="6" :md="6">
              <h3>{{item.title}}</h3>
              <draggable
                class="list-group"
                v-model="item.list"
                v-bind="dragOptions"
                :move="onMove"
                @start="isDragging=true"
                @end="isDragging=false"
              >
                <transition-group name="no" class="list-group" tag="ul">
                  <li
                    class="list-group-item"
                    v-for="element in item.list"
                    :key="element.id"
                    :style="'border-left-color:' + item.color"
                    @click="concreteTask(element)"
                  >
                    <p>{{element.name}}</p>
                  </li>
                </transition-group>
              </draggable>
              <p style="text-align:center;padding:10px;">
                <el-button size="medium" round @click="addChildTask(index)">添加任务</el-button>
              </p>
            </el-col>
          </div>
        </el-row>
      </div>
    </div>
    <!-- <a-modal v-model="dialogAddVisible" destroy-on-close>
      <el-form ref="form" :model="form">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12">
            <el-form-item label="任务名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAdd()">新 增</el-button>
      </div>
    </a-modal> -->
    <a-modal
      v-model="dialogConcreteVisible"
      destroy-on-close
      :title="dialogName == 0?'添加任务':'任务详情'"
    >
      <el-form ref="form" :model="form">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="任务名称" :label-width="formLabelWidth">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="任务激励值" :label-width="formLabelWidth">
              <el-input v-model="form.drivingToken"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="是否禁用拖拽" :label-width="formLabelWidth">
              <el-switch
                v-model="form.fixed"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveTask">提 交</el-button>
        <el-button type="primary" @click="dialogConcreteVisible = false">关 闭</el-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import top from "@/components/top/";
import topSearch from "@/views/task/topSearch.vue";

export default {
  name: "Index",
  components: {
    draggable,
    top,
    topSearch
  },
  data() {
    return {
      editable: true,
      isDragging: false,
      delayedDragging: false,
      taskList: [
        {
          title: "待进行",
          color:"#ff9900",
          list: [
            {
              name: "测试待进行任务",
              drivingToken: 123,
              fixed: false,
              id: 1
            },
            {
              name: "测试1任务",
              drivingToken: 565,
              fixed: false,
              id: 5
            },
            {
              name: "洗刷",
              drivingToken: 556,
              fixed: false,
              id: 6
            }
          ]
        },
        {
          title: "进行中",
          color:"#3399ff",
          list: [
            {
              name: "测试进行中任务",
              drivingToken: 456,
              fixed: false,
              id: 2
            },
            {
              name: "洗脸",
              drivingToken: 899,
              fixed: false,
              id: 7
            }
          ]
        },
        {
          title: "审核中",
          color:"#ff6600",
          list: [
            {
              name: "测试审核中任务",
              drivingToken: 789,
              fixed: false,
              id: 3
            },
            {
              name: "写代码",
              drivingToken: 412,
              fixed: false,
              id: 8
            }
          ]
        },
        {
          title: "已完成",
          color:"#00cc66",
          list: [
            {
              name: "测试已完成任务",
              drivingToken: 456,
              fixed: false,
              id: 4
            }
          ]
        }
      ],
      dialogAddVisible: false,
      dialogConcreteVisible: false,
      form: {
        id: parseInt(100 * Math.random())
      },
      formLabelWidth: "120px",
      dialogName: 0,
      _index: 0
    };
  },
  created() {},
  updated() {
    console.log(this.taskList);
  },
  methods: {
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
    addTaskClick() {
      // this.form.id++;
      // this.form.name++;
      // let list = [];
      // list.push({ id: this.form.id, name: this.form.name, fixed: false });
      // this.taskList.push(list);
      this.dialogConcreteVisible = true;
    },
    handleAdd() {
      this.dialogConcreteVisible = false;
    },
    addChildTask(item) {
      this.dialogName = 0;
      this.dialogConcreteVisible = true;
      this._index = item;
      this.form = {
        id: parseInt(100 * Math.random())
      };
    },
    saveTask() {
      this.taskList.forEach((i, index) => {
        if (this._index == index) {
          this.taskList[index].list.push(this.form);
          this.dialogConcreteVisible = false;
        }
      });
    },
    concreteTask(item) {
      this.dialogName = 1;
      this.form = item;
      this.dialogConcreteVisible = true;
    },
    switchChange(val) {
      this.taskList.forEach(i => {
        i.list.forEach(j => {
          if (this.form.id == j.id) {
            j.fixed = val;
          }
        });
      });
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        // disabled: !this.editable,
        ghostClass: "ghost"
      };
    }
  },
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    }
  }
};
</script>
<style scoped lang="less">
.draggable {
  // 重点，为了不会换行显示
  // display: flex;
  // overflow-x: auto;
  // overflow-y: hidden;
  .draggable_list {
    // flex-shrink: 0;
    // width: 250px;
    margin: 0px 10px;
    h3 {
      text-align: center;
      font-weight: 600;
      font-size: 16px;
    }
    .list-group-item {
      position: relative;
      display: block;
      padding: 10px 15px;
      margin-bottom: -1px;
      background-color: #fff;
      border: 1px solid #ddd;
    }
    .list-group-item:last-child {
      margin-bottom: 0;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .list-group-item {
      cursor: move;
      margin-bottom: 10px;
      border-left: 3px solid;
    }
  }
}
</style>
